<!DOCTYPE HTML>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="site/head::head(${commons.site_title()},${commons.google_site_verification()}, ${commons.baidu_site_verification()})"></div>

<body>

<!-- header -->
<div th:replace="site/header::header"></div>

<!-- header -->
<!-- main -->
<main class="container" role="main-inner-wrapper">
    <div class="row">
        <section class="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
            <article role="pge-title-content">
                <header>
                    <h2><span>About </span> me</h2>
                </header>
                <p>A java developer</p>
            </article>
        </section>
        <section class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <article class="about-content">
                <p>In my free time, I enjoy coding, cycling, photography, and gaming.</p>
                <p>If you need to contact me, please click on the image below or the link at the bottom of the page.</p>
            </article>
        </section>
        <div class="clearfix"></div>
        <!-- thumbnails -->
        <div class="thumbnails-pan">
            <th:block th:each="link,linkStat : ${links}">
                <th:block th:if="${linkStat.index < 3}">
                    <section class="col-xs-12 col-sm-4 col-md-4 col-lg-4 ">
                        <figure>
                            <img class="img-responsive" th:onclick="javascript:linkFirend([[${link.slug}]])" th:src="@{'/site/images/about-images/about-image-' + ${linkStat.index+1} + '.jpg'}"/>
                            <figcaption>
                                <h3>
                                    <th:block th:text="${link.name}"></th:block>
                                </h3>
                                <h5>
                                    <th:block th:text="${link.description}"></th:block>
                                </h5>
                            </figcaption>
                        </figure>
                    </section>
                </th:block>
            </th:block>
        </div>
        <!-- thumbnails -->
    </div>
</main>
<!-- main -->

<!-- footer -->
<div th:replace="site/footer::footer(${commons.site_title()},${commons.site_record()},${commons.site_url()})"></div>

</body>
</html>